.normal {
  color: #FFFFFF;
}
.advanced {
  color: #61C8DE;
}
.rare {
  color: #A060E4;
}
.artifact {
  color: #E000E0;
}
.legend {
  color: #E96E00;
}
.epic {
  color: #e7a300;
}
.myth {
  color: #e7a300;
}

.small-icon {
  .eq-icon {
    width: 24px;
    height: 24px;
  }
}

.eq-icon {
  width: 36px;
  height: 36px;
  position: relative;
  display: inline-block;
  border-radius: 3px;
  
  &.can-click {
    cursor: pointer;
  }

  &.gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    
    &::after {
      border-image: linear-gradient(#A4A4A4, #000) 1;
    }
  }

  &::after {
    content: '';
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid;
    border-image: linear-gradient(#e7a300, #000) 1;
  }

  &.normal {
    &::after {
      border-image: linear-gradient(#e7a300, #000) 1;
    }
  }
  &.advanced {
    &::after {
      border-image: linear-gradient(#61c8de, #000) 1;
    }
  }
  &.rare {
    &::after {
      border-image: linear-gradient(#a060e4, #000) 1;
    }
  }
  &.artifact {
    &::after {
      border-image: linear-gradient(#ef00ef, #000) 1;
    }
  }
  &.legend {
    &::after {
      border-image: linear-gradient(#e96e00, #000) 1;
    }
  }
  &.epic {
    &::after {
      border-image: linear-gradient(#e7a300, #000) 1;
    }
  }
  &.myth {
    &::after {
      border-image: linear-gradient(#e7a300, #000) 1;
      // border-image: linear-gradient(#f8c63d, #cc66e7) 1;
    }
  }
  // &.can-click:hover {
  //   cursor: pointer;
  //   background-image: linear-gradient(#3ae7fa, #3ae7fa);
  // }

  > .img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2px;
  }
  
  > .num {
    position: absolute;
    top: -9px;
    right: -4px;
    font-size: 13px;
    z-index: 15;
    color: #F800F8;
    text-shadow: 2px 0 1px #000, -2px 0 1px #000, 0 -2px 1px #000, 0 2px 1px #000;
  }
}